<template>
    <div class="day_sub day sub" v-for="item in onceMissions" :key="item.id">
        <div class="info">
            <div class="s-tip c-title-4" style="font-weight: 600">{{ MAP_MISSION[item.action].title }}</div>
            <div class="c-title-5 c-clor">{{ MAP_MISSION[item.action].desc }}</div>
        </div>
        <div class="fetch c-title-4">
            <v-btn :color="item.isComplete ? '#787570' : '#FCC235'" rounded="xl" @click="onComplete(item)" :disabled="!!item.isComplete">{{ getLabel(item) }}</v-btn>
            <div class="main-color mt" v-if="!item.isComplete">+<JEnergy :num="item.energyAmount"></JEnergy></div>
        </div>
    </div>

    <!-- <div class="day_sub day mt-5" style="margin-block: 5px">每日任务列表
        <div class="info">
            <div class="s-tip c-title-4" style="font-weight: 600">{{ $t("message.Day.a") }}</div>
            <div class="c-title-5 c-clor">{{ $t("message.Day.b") }}</div>
        </div>
        <div class="get c-title-4 mr-0" @click="onToggle">
            {{ $t("message.Day.c") }}
            <span class="main-color mr">
                <JEnergy :num="waitGet"></JEnergy>
            </span>
            <img class="arow" :class="{ open }" src="./img/expend.png" />
        </div>
    </div> -->
    <div class="alls" v-show="open">
        <div class="day sub" style="margin-block: 0px" v-for="item in repeatMissions" :key="item.id">
            <div class="info">
                <div class="s-tip c-title-4">{{ MAP_MISSION[item.action].title }}</div>
                <div class="c-title-5">{{ MAP_MISSION[item.action].desc }}</div>
            </div>
            <div class="fetch c-title-4">
                <v-btn color="#FCC235" rounded="xl" @click="onComplete(item)" :disabled="!!item.isComplete">{{ getLabel(item) }}</v-btn>
                <div class="main-color mt">+<JEnergy :num="item.energyAmount"></JEnergy></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useUser, MAP_MISSION } from "@/stores/user";
import { get } from "@/comm/request";
import { URL_GET_MISSION } from "@/comm/api";
import JEnergy from "@/components/j-energy/index.vue"
import i18n from "@/locals";

const user = useUser();

const open = ref(localStorage.getItem("once") == "1");
localStorage.removeItem("once");

const getLabel = (item: any) => {
    if (item.isComplete == 1) {
        // return "已領取";
        return i18n.global.t("message.Day.d");
    } else {
        if (item.status == 1) {
            // return "領取";
            return i18n.global.t("message.Day.e");
        }
    }
    // return "去完成"
    return i18n.global.t("message.Day.f");
};

const repeatMissions = computed(() => {
    console.log("user.dailyMissins----", user.dailyMissins);
    return user.dailyMissins;
});

const waitGet = computed(()=>{
    if(!user.missions) return 0;
    return user.missions.reduce((a, b) =>{
        if(b.isComplete != 1){
            if(b.status != 1){
                return a + b.energyAmount
            }
        }
        return a;
    }, 0);
})

const onceMissions = computed(() => {
    if(!user.missions) return [];
    return user.missions.filter(item => {
        return item.isRepeat == 0;
        // return item.isRepeat == 0 && item.action != "REGISTER_COMPLETE";
    });
});

const onComplete = async (item: any) => {
    if (item.isComplete == 1) {
        // return "已領取";
    } else {
        if (item.status == 1) {
            // return "領取";
            user.completeMission(item);
        } else {
            //跳转。。。
        }
    }
};

// onMounted(() => {
//     user.getMission();
// })

const onToggle = () => {
    open.value = !open.value;
};

const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t("message.Global.Home"),
        disabled: false,
        href: "/"
    },
    {
        // title: "獎勵中心",
        title: i18n.global.t("message.Global.child.i"),
        disabled: true,
        href: ""
    }
]);

const onGet = () => {
    console.log("ok");
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
